<style lang="less" scoped src="./orders.less"></style>
<script src="./orders.js"></script>

<template>
    <div>
        <Row style="font-size: 15px;">
            订单类型：<Select v-model="query.bs" style="width:10%" filterable clearable>
            <Option value="1">会议培训沙龙</Option>
            <Option value="2">自然教育活动</Option>
        </Select>
            活动（培训）名称：<Input v-model="query.activityName" clearable style="width: 15%"></Input>
            订单状态：<Select v-model="query.status" style="width:10%" filterable clearable>
            <OptionGroup label="自然教育活动">
                <Option value="10">待付款</Option>
                <Option value="11">已付款</Option>
                <Option value="12">待出发</Option>
                <Option value="13">待评价</Option>
                <Option value="14">已评价</Option>
            </OptionGroup>
            <OptionGroup label="会议培训沙龙">
                <Option value="20">不需审核</Option>
                <Option value="21">待审核</Option>
                <Option value="22">已审核</Option>
            </OptionGroup>
        </Select>
            是否优惠：<Select v-model="query.isdiscount" style="width:8%" filterable clearable>
            <Option value="0">否</Option>
            <Option value="1">是</Option>
        </Select>
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
        </Row>
        <Row style="font-size: 15px;">
            {{'男女比例：' + ratio}}
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <Modal :mask-closable="false" v-model="hisModalVisible" title="历史记录" width="60%" @on-cancel="hisClose">
            <div class="main-table">
                <Table border :columns="historyColumns" :data="historyData"></Table>
            </div>
            <div class="pagination">
                <Page :total="hisTotal" size="small" :page-size="hisSize" :current.sync="hisIndex" @on-change="history"
                      show-total show-elevator></Page>
            </div>
            <Modal :m
            <div slot="footer">
                <Button type="primary" @click="hisClose">确定</Button>
            </div>
        </Modal>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal :mask-closable="false"
                v-model="viewModalVisible"
                title="订单详情"
                @on-ok="viewModalVisible = false"
                @on-cancel="viewModalVisible = false"
                width="80%">
            <Form :model="formData" :label-width="120">
                <FormItem label="活动（培训）名称">
                    <div class="conts">
                        {{formData.activityName}}
                    </div>
                </FormItem>
                <Row>
                    <Col span="8">
                    <FormItem label="下单人">
                        <div class="conts">
                            {{formData.userName}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="下单时间">
                        <div class="conts">
                            {{formData.createtime}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="订单状态">
                        <div class="conts">
                            {{formData.type}}
                        </div>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="8">
                    <FormItem label="订单数量">
                        <div class="conts">
                            {{formData.ordersnums}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="总价">
                        <div class="conts">
                            {{formData.moneysum}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="付款时间">
                        <div class="conts">
                            {{formData.paytime}}
                        </div>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="8">
                    <FormItem label="出发（培训）时间">
                        <div class="conts">
                            {{formData.departtime}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="16">
                    <FormItem label="订单备注">
                        <div class="conts">
                            {{formData.remark}}
                        </div>
                    </FormItem>
                    </Col>
                </Row>
                <div class="title">
                    <span>订单明细信息：</span>
                </div>
                <Row v-for="item in prices">
                    <Col span="8">
                    <FormItem label="类型">
                        <div class="conts">
                            {{item.price.name}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="数量">
                        <div class="conts">
                            {{item.nums}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="小计">
                        <div class="conts">
                            {{item.moneysum}}
                        </div>
                    </FormItem>
                    </Col>
                </Row>
                <div class="title">
                    <span>订单联系人信息：</span>
                </div>
                <Row v-for="item in contacts">
                    <Col span="6">
                    <FormItem label="联系人姓名">
                        <div class="conts">
                            {{item.name}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="手机">
                        <div class="conts">
                            {{item.phone}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="身份证">
                        <div class="conts">
                            {{item.idcard}}
                        </div>
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="性别">
                        <div class="conts">
                            {{item.sex == '1' ? '男' : '女'}}
                        </div>
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            <Form v-model="formAssess" :label-width="120" v-if="formAssess != null">
                <div class="title">
                    <span>评价：</span>
                </div>
                <FormItem label="评分">
                    <div>
                        <Rate disabled v-model="formAssess.level"></Rate>
                    </div>
                </FormItem>
                <FormItem label="评语">
                    <div class="conts" v-html="formAssess.comment">
                        {{formAssess.comment}}
                    </div>
                </FormItem>
            </Form>
        </Modal>
        <Modal :mask-closable="false" v-model="assModalVisible" title="订单评价" width="50%" @on-cancel="assCancel">
            <Form :model="formData" :label-width="120">
                <FormItem label="评分">
                    <Rate show-text v-model="formData.level"></Rate>
                </FormItem>
                <FormItem label="评语">
                    <textarea class='tinymce-textarea' id="comment" v-model="formData.comment"></textarea>
                </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="assSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="assCancel">取消</Button>
            </div>
        </Modal>
    </div>
</template>